<style scoped lang='scss'>
.header {
    background-color: #252533;
    width: 100%;
    height: 66px;
    .nav {
        display: flex;
        width: 80%;
        height: 100%;
        margin: 0 auto;
        align-items: center;
        .logo {
            width: 104px;
            height: 17px;
            padding-right: 100px;
        }
        .navbar {
            // margin-left: 120px;
            flex: 1;
            overflow: hidden;
            display: flex;
            li {
                width: 160px;
                height: 66px;
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: rgba(255, 255, 255, 1);
                line-height: 66px;
                margin-left: 20px;
            }
        }
    }
}
</style>

<template>
    <div class="header">
        <div class="nav" @mouseover="slideAnimation">
            <div class="logo">
                <img v-if="showWhite" src="../assets/logo-white.png" class="logo">
                <img v-else src="../assets/logo.png" class="logo">
            </div>
            <ul class="navbar">
                <router-link to="/dashboard" tag="li">首页</router-link>
                <router-link to="/applets" tag="li">小程序</router-link>
                <router-link to="/customization" tag="li">定制化方案</router-link>
                <router-link to="/case" tag="li">成功案例</router-link>
                <router-link to="/news" tag="li">最新资讯</router-link>
                <router-link to="/about" tag="li">关于匠把头</router-link>
                <li>
                    <p>400-8888-8888</p>
                </li>
            </ul>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
export default {
    name: "Header",
    data() {
        return {
            activeIndex: '1',
            backColor: '#252533'
        }
    },
    components: {}
}
</script>

